<template>
  <div class="drop-container" :style="styleObj">
    <ul>
        <li>
            <img src="@/assets/images/QR_APP.png" />
            <div class="info">
                <h2>华为商城APP</h2>
                <p style="color: #cb242b; line-height: 16px;">
                    新人专享好礼<br>
                    最高5000积分
                </p>
                <span class="icon">
                    <i class="iconfont">
                        &#xe6fe;
                        <span class="text">Android</span>
                    </i>
                    <i class="iconfont">
                        &#xe68a;
                        <span class="text">iPhone</span> 
                    </i>
                    <i class="iconfont">
                        &#xe601;
                        <span class="text">WeChat</span>   
                    </i>
                </span>
            </div>
        </li>
        <li>
            <img src="@/assets/images/QR_公众号.jpg" />
            <div class="info">
                <h2>华为商城公众号</h2>
                <p>微信扫一扫</p>
                <span class="icon">
                    <i class="iconfont">
                        &#xe601;
                        <span class="text">WeChat</span>
                    </i>
                </span>
            </div>
        </li>
        <li>
            <img src="@/assets/images/QR_微信小程序.png" />
            <div class="info">
                <h2>微信小程序</h2>
                <span class="icon">
                    <i class="iconfont">
                        &#xe601;
                        <span class="text">WeChat</span>
                    </i>
                </span>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue'
import props from './BaseConfig'
import { getPosition } from './BaseConfig'
export default {
  name: 'VmDropdownBar3',
  props,
  setup (props) {
    const { top, left, right, bottom } = getPosition(props)
    const styleObj = reactive({
        top,
        left,
        right,
        bottom
    })
    return { styleObj }
  }

}
</script>

<style lang="scss" scoped>
.drop-container {
    position: absolute;
    background: #fff;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    width: 244px;
    height: 395px;
    z-index: 9999999;
}
ul {
    width: 100%;
    padding: 20px 0 20px 0;
    li {
        display: flex;
        padding-left: 24px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e5e5e5;
        &:last-child {
            border: none;
        }
        img {
            margin-right: 12px;
            width: 89px;
            height: 90px;
        }
        .info {
            line-height: 18px;
            height: 90px;
            h2 {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 2px;
                margin-top: 0;
            }
            p {
                color: #777;
            }
            .icon {
                display: flex;
                width: 32px;
                height: 32px;
                margin-top: 5px;
                font-size: 17px;
                text-align: center;
                i {
                    margin-left: -6px;
                    .text {
                        font-size: 2px;
                        display: block;
                        color: #758a99;
                        transform: scale(0.7);
                    }
                }   
            }
        }
    }
}
</style>